<template>
	<view class="evaluate">
		<view class="goodsInfo">
			<image :src="details.pic" mode=""></image>
			<view class="goods_texts">
				<view class="goods_title">{{details.name}}</view>
				<view class="goods_num">{{details.ggname}} x{{details.num}}</view>
				<view class="goods_money">￥{{details.sell_price}}</view>
			</view>
			<!-- <view class="goods_stauts">已收货</view> -->
		</view>
		<view class="evaluate_info">
			<!-- 		<view class="evaluate_type">
				<view class="" @click="clickEvaluateType(1)">
					<image :src="`https://wx.2024csnl.com/static/mine/${evaluate==1?'good_active':'good'}.png`" mode=""></image>
					<text :class="{'active_text':evaluate==1}">好评</text>
				</view>
				<view class="" @click="clickEvaluateType(2)">
					<image :src="`https://wx.2024csnl.com/static/mine/${evaluate==2?'bad_active':'bad'}.png`" mode=""></image>
					<text :class="{'active_text':evaluate==2}">中评</text>
				</view>
				<view class="" @click="clickEvaluateType(3)">
					<image :src="`https://wx.2024csnl.com/static/mine/${evaluate==3?'bad_active':'bad'}.png`" mode=""></image>
					<text :class="{'active_text':evaluate==3}">差评</text>
				</view>
			</view> -->
			<view class="evaluate_content">
				<textarea placeholder="请输入评价" v-model="content"></textarea>
				<view class="files">
					<view class="file" v-if="imgList.length<5" @click="chooseFile()">
						<image src="https://wx.2024csnl.com/static/mine/pj_upload_img.png" mode=""></image>
					</view>
					<!-- 				<view class="file">
						<image src="https://wx.2024csnl.com/static/mine/pj_upload_video.png" mode=""></image>
					</view> -->
					<view class="file" v-for="(item,index) in imgList" :key="index">
						<image :src="item" mode=""></image>
						<view class="del_btn" @click="deleteImg(index)">
							<uni-icons type="close" size="24"></uni-icons>
						</view>
					</view>
					<!-- <view class="file">
						<video id="myVideo" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4" :controls="false" :show-play-btn="false" :show-center-play-btn="false"></video>
						<view class="del_btn" @click="deleteImg(index)">
							<uni-icons type="close" size="24"></uni-icons>
						</view>
					</view> -->
				</view>
			</view>
		</view>
		<view class="score">
			<!-- 	<view class="score_t">
				<view class="line"></view>
				<view class="title">店铺评分</view>
			</view> -->
			<view class="score_star">
				<view class="star_name">商品评分</view>
				<uni-rate :value="score" :margin="10" color="#bbb" active-color="red" @change="onChange" />
			</view>
			<view class="score_star">
				<view class="star_name">店铺评分</view>
				<uni-rate :value="scoreOne" :margin="10" color="#bbb" active-color="red" @change="onChangeScore" />
			</view>
			<!-- <view class="score_star" style="padding:30upx 17upx;">
				<view class="star_name">物流服务</view>
				<uni-rate :value="3" :margin="10" color="#bbb" active-color="red" />
			</view>
			<view class="score_star">
				<view class="star_name">服务态度</view>
				<uni-rate :value="3" :margin="10" color="#bbb" active-color="red" />
			</view> -->
		</view>
		<button type="default" @click="onEvaluateMyOrder">提交</button>
	</view>
</template>

<script>
	import {
		evaluateMyOrder
	} from "../../../api/index.js"
	export default {
		data() {
			return {
				content: '',
				details: {},
				id: '',
				isAgency: getApp().globalData.isAgency,
				imgList: [],
				evaluate: 1,
				imgList: [],
				score: 3,
				scoreOne: 3,
				orderType:null,
			};
		},
		onLoad(opt) {
			this.id = opt.id
			this.orderType=opt.orderType
			this.getEvaluateMyOrder()
		},
		methods: {
			onChangeScore(e) {
				this.scoreOne = e.value
			},
			onChange(e) {
				this.score = e.value
			},
			// 提交数据
			async onEvaluateMyOrder() {
				if (this.content == '') {
					this.showToast('请输入评价')
					return
				}
				const res = await evaluateMyOrder(`s=/ApiOrder/comment`, {
					ogid: this.id,
					content: this.content,
					content_pic: this.imgList.join(','),
					score: this.score,
					score1: this.scoreOne,
					ordertype:this.orderType
				}, "POST")
				const {
					status,
					data,
					msg
				} = res.data
				this.showToast(msg)
				if (status == 1) {
					setTimeout(() => {
						uni.redirectTo({
							url: '/package/mine/myOrderList/myOrderList?type=3'
						})
					}, 2000)
				}
			},

			// 获取数据
			async getEvaluateMyOrder() {
				const res = await evaluateMyOrder(`s=/ApiOrder/comment&ogid=${this.id}&ordertype=${this.orderType}`)
				const {
					status,
					data,
					msg
				} = res.data
				if (status == 1) {
					this.details = data.og
					console.log(res, '', data)
				} else {
					this.showToast(msg)
				}
			},
			//上传图片
			async chooseFile() {
				uni.chooseImage({
					count: 5 - this.imgList.length,
					sourceType: ['album'],
					success: (res) => {
						uni.showLoading({
							title: '上传中...'
						})
						// console.log(res,"res---")
						res.tempFilePaths.forEach(item => {
							this.upImg(item)
						})
					}
				});
			},
			upImg(path) {
				let BASE_URL = getApp().globalData.BASE_URL
				let platform = 'app'
				// #ifdef H5
				if (this.isAgency) {
					platform = 'h5'
					BASE_URL = '/api'
				}
				// #endif
				uni.uploadFile({
					url: `${BASE_URL}?s=/ApiImageupload/uploadImg&aid=1&platform=${platform} `,
					filePath: path,
					name: 'file',
					// #ifndef H5
					header: {
						'content-type': 'multipart/form-data'
					},
					// #endif
					success: (res) => {
						// console.log(res, "上传成功")
						const data = JSON.parse(res.data);
						// console.log(data, "data")
						const {
							msg,
							status,
							url
						} = data
						if (status == 1) {
							this.imgList.push(url)
						}
						uni.hideLoading();
					}
				});
			},
			clickEvaluateType(e) {
				this.evaluate = e
			},
			deleteImg(index) {
				this.$delete(this.imgList, index)
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
	}

	.evaluate {
		padding: 30upx;
		box-sizing: border-box;
		color: #333333;

		.goodsInfo {
			padding: 30upx 24upx;
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 10upx;
			display: flex;
			justify-content: space-between;
			margin-bottom: 20upx;

			image {
				width: 160upx;
				height: 144upx;
				border-radius: 10upx;
			}

			.goods_texts {
				flex: 1;
				margin: 0 18upx;

				.goods_title {
					font-size: 28upx;
					line-height: 42rpx;
				}

				.goods_num {
					font-size: 24upx;
					line-height: 24upx;
					color: #999999;
					padding: 20upx 0 34upx;
				}

				.goods_money {
					font-size: 24upx;
					line-height: 24upx;
					font-weight: Medium;
				}
			}

			.goods_stauts {
				font-size: 24upx;
				color: #999999;
			}
		}

		.evaluate_info {
			padding: 32upx 13upx 20upx;
			box-sizing: border-box;
			border-radius: 10upx;
			background-color: #fff;
			margin-bottom: 20upx;

			.evaluate_type {
				display: flex;
				justify-content: space-between;
				padding: 0 62upx;
				box-sizing: border-box;
				margin-bottom: 26upx;

				view {
					display: flex;
					align-items: center;
					font-size: 26upx;

					image {
						width: 34upx;
						height: 36upx;
						margin-right: 20upx;
					}

					.active_text {
						color: #41644A;
					}
				}
			}

			.evaluate_content {
				width: 100%;
				height: 290upx;
				background-color: #f8f8f8;

				textarea {
					width: 100%;
					height: 180upx;
					padding: 25upx 28upx;
					box-sizing: border-box;
					font-size: 22upx;
					color: #999999;
				}

				.files {
					display: flex;
					flex-direction: row;
					padding: 0 20upx;
					box-sizing: border-box;

					.file {
						width: 90upx;
						height: 90upx;
						margin-right: 20upx;
						position: relative;

						video,
						image {
							width: 90upx;
							height: 90upx;
						}

						.del_btn {
							position: absolute;
							top: -18upx;
							right: -18upx;
						}
					}
				}
			}
		}

		.score {
			padding: 46upx 17upx 56upx;
			box-sizing: border-box;
			border-radius: 10upx;
			background-color: #fff;
			margin-bottom: 50upx;

			.score_t {
				display: flex;
				align-items: center;
				margin-bottom: 56upx;

				.line {
					width: 4upx;
					height: 29upx;
					border-radius: 2upx;
					background-color: #41644A;
					margin-right: 13upx;
				}

				.title {
					font-size: 30upx;
					font-weight: Medium;
				}
			}

			.score_star {
				padding: 0 17upx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				margin-bottom: 30rpx;

				.star_name {
					margin-right: 54upx;
					font-size: 28upx;
				}
			}
		}

		button {
			background-color: #41644A;
			color: #fff;
		}
	}
</style>
